<template>
	<div class="p30">
		<div class="fs25 pb20 pt20">watch 监听数据</div>
		<dzinpu v-model:title='any' />
		
		<div>
			<div>旧的值 ：{{oldval}} </div>
			<div>新的值 ：{{newval}} </div>
		</div>
	</div> 

	<div class="pl20 pr20 ">
		ps：一个简单的 watch 和vue2 差不多，但是！这个页面里顺便有组件相关知识，可以了解下。顺便看看我这个input 帅不帅 
	</div>

	<div style="white-space: pre;">
		<pre>
			<code ref="codeBlock" :class="[language, 'code-block']">
			  {{ code1 }}
			</code>
		</pre>
	</div>

</template>

<script setup>
import { computed, reactive, ref,watch } from 'vue';
import dzinpu from '@/components/dzinput/index.vue';
	let any = ref('')
	let newval = ref('')
	let oldval = ref('')
	watch(any , (newVal,oldVal)=>{
		newval.value = newVal
		oldval.value = oldVal
	})
	
	const code1 = ref(`
	let any = ref('这是一个字符串')
	let newval = ref('')
	let oldval = ref('')
	watch(any , (newVal,oldVal)=>{
		newval.value = newVal
		oldval.value = oldVal
	})
	`);
	
</script>

<style>
	.code-block {
		display: block;
		padding: 1em;
		background-color: black;
		color: #00FFD1;
		/* 设置代码颜色为蓝绿色，可以根据需要调整颜色值 */
		text-align: left;
		font-size: 18px;
	}
</style>